<template>
  <div class="after">
    <div></div>
    <div  class="section">
      <div class="af_header">
        <el-button style="background-color:#171C49;color:#fff" type="primary" plain>返回</el-button>
        <el-button style="background-color:#fff;color:#171C49" type="primary" plain>售后管理 > 售后详情</el-button>
        <el-button style="background-color:#fff;color:#171C49" type="primary" plain
          >状态：待审核 申请时间 2019-04-28 17:52:12</el-button
        >
        <el-button type="primary" style="background-color:#171C49;color:#fff" plain @click="dff(data1[index].dingdanhao)">通过</el-button>
        <el-button type="primary" style="background-color:#999999;color:#fff" plain @click="cff(data1[index].dingdanhao)"
          >拒绝</el-button
        >
        
        <el-badge :value="sum" class="item">
          <el-button size="small">待处理事件</el-button>
        </el-badge>
      </div>

      <div class="Buyer_info">
        <div class="table1">
          <div class="header">买家信息</div>
          <div class="section">
            <p>账号ID/微信名称：{{ data1[index].maijiaweixin }}</p>
            <p>订单号：{{ data1[index].dingdanhao }}</p>
            <p>下单时间：{{ data1[index].maijiagoumaishijian }}</p>
            <p>微信支付商户订单号：{{ data1[index].dingdanhao }}</p>
            <p>商品详情：{{ data1[index].xinxi }}</p>
          </div>
        </div>
        <div class="table1">
          <div class="header">申请详情</div>
          <div class="section">
            <p>售后类型：{{ data1[index].dingdanfenyong }}</p>
            <p>商品类型：{{ data1[index].dingdanhao }}</p>
            <p>美物订单编号：{{ data1[index].maijiagoumaishijian }}</p>
            <p>实付款：￥{{ data1[index].jiage }}</p>
            <p>发货地址：{{ data1[index].shouhuodizhi }}</p>
            <p>退款说明：{{ data1[index].maijiayonghuming }}</p>
          </div>
        </div>
        <el-table border style="width: 100%">
          <el-table-column prop="date" label="时间" width="180">
          </el-table-column>
          <el-table-column prop="name" label="备注人" width="180">
          </el-table-column>
          <el-table-column prop="address" label="备注信息"> </el-table-column>
        </el-table>

        <div class="table1" style="margin-top: 100px">
          <div class="header">后台备注</div>
          <div class="section">
            <p>详细信息：{{ succeed }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data1: [],
      index: "0",
      succeed: "",
      sum: '1',
    };
  },
  created() {
    this.$axios
      .get("http://10.0.31.157:8888/dingdanguanli?name=1")
      .then((res) => {
        this.data1 = res.data;
        this.sum = this.data1.length
      });
  
  },
  mounted(){
    console.log(this.data1.length);
  },
  methods: {
    dff(a) {
      this.index++;
      this.succeed = "审核通过";
      this.data1 = this.data1.filter((res) => {
        return res.dingdanhao != a;
      });
      this.sum = this.data1.length
    },
    cff(a) {
      this.index++;
      this.succeed = "审核未通过";
      this.data1 = this.data1.filter((res) => {
        return res.dingdanhao != a;
      });
      this.sum = this.data1.length
    },
  },
};
</script>

<style lang="scss" scoped>
.after {
  width: 100%;
  height: 100%;
  // box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  .section {
    padding: 10px 15px;
    .af_header {
      text-align: left;
      margin-bottom: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      .item {
        margin-top: 10px;
        margin-right: 40px;
      }
    }
    .Buyer_info {
      text-align: left;
      .table1 {
        margin-bottom: 80px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        .header {
          height: 40px;
          background-color: #f2f2f2;
          width: auto;
          line-height: 40px;
          padding-left: 20px;
        }
        .section {
          width: auto;
          height: auto;
          border: 1px solid #f2f2f2;
        }
      }
      el-table {
        margin-bottom: 100px;
      }
    }
  }
}
.el-badge,.item{
position: fixed;
right: 20px;

}
</style>